import { BaseMenu } from './BaseMenu';
import { MenuConfig } from '../MenuManager';
import { Vector2D } from '../../utils/Vector2D';

interface GameModeInfo {
    name: string;
    type: 'classic' | 'timeAttack' | 'maze';
    stars: number;
}

export class GameModeMenu extends BaseMenu {
    private modes: GameModeInfo[] = [
        { name: '经典模式', type: 'classic', stars: 1 },
        { name: '限时挑战', type: 'timeAttack', stars: 3 },
        { name: '迷宫生存', type: 'maze', stars: 5 }
    ];

    constructor(config: MenuConfig) {
        super(config);
    }

    public render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
        const cardWidth = Math.min(300, canvas.width * 0.45);
        const cardHeight = cardWidth * 0.66;
        const spacing = 20;
        const startX = (canvas.width - (cardWidth * Math.min(this.modes.length, 4) + spacing * (Math.min(this.modes.length, 4) - 1))) / 2;
        const startY = (canvas.height - cardHeight) / 2;

        // 绘制返回按钮
        this.drawBackButton(ctx);

        // 绘制模式卡片
        this.modes.forEach((mode, index) => {
            const x = startX + (cardWidth + spacing) * index;
            this.drawModeCard(ctx, x, startY, cardWidth, cardHeight, mode);
        });
    }

    public handleClick(x: number, y: number, canvas: HTMLCanvasElement): string | null {
        // 检查返回按钮点击
        if (this.isBackButtonClicked(x, y)) {
            return 'back';
        }

        const cardWidth = Math.min(300, canvas.width * 0.45);
        const cardHeight = cardWidth * 0.66;
        const spacing = 20;
        const startX = (canvas.width - (cardWidth * Math.min(this.modes.length, 4) + spacing * (Math.min(this.modes.length, 4) - 1))) / 2;
        const startY = (canvas.height - cardHeight) / 2;

        for (let i = 0; i < this.modes.length; i++) {
            const cardX = startX + (cardWidth + spacing) * i;
            if (x >= cardX && x <= cardX + cardWidth &&
                y >= startY && y <= startY + cardHeight) {
                if (this.isModeUnlocked(this.modes[i].type)) {
                    return `selectMode:${this.modes[i].type}`;
                }
            }
        }
        return null;
    }

    public update(deltaTime: number): void {
        // 游戏模式菜单可能不需要更新逻辑
    }

    private drawBackButton(ctx: CanvasRenderingContext2D): void {
        const backButtonX = 50;
        const backButtonY = 50;

        ctx.fillStyle = this.theme.textColor;
        ctx.strokeStyle = this.theme.borderColor;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(backButtonX, backButtonY, 30, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        // 绘制返回箭头
        ctx.beginPath();
        ctx.moveTo(backButtonX + 10, backButtonY);
        ctx.lineTo(backButtonX - 10, backButtonY);
        ctx.lineTo(backButtonX - 5, backButtonY - 5);
        ctx.moveTo(backButtonX - 10, backButtonY);
        ctx.lineTo(backButtonX - 5, backButtonY + 5);
        ctx.strokeStyle = '#FFFFFF';
        ctx.stroke();
    }

    private isBackButtonClicked(x: number, y: number): boolean {
        const backButtonX = 50;
        const backButtonY = 50;
        return Math.sqrt(Math.pow(x - backButtonX, 2) + Math.pow(y - backButtonY, 2)) <= 30;
    }

    private drawModeCard(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, mode: GameModeInfo): void {
        const isUnlocked = this.isModeUnlocked(mode.type);

        // 绘制卡片背景
        ctx.fillStyle = this.theme.backgroundColor;
        ctx.strokeStyle = isUnlocked ? this.theme.borderColor : '#666666';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.roundRect(x, y, width, height, 10);
        ctx.fill();
        ctx.stroke();

        // 绘制模式名称
        ctx.fillStyle = isUnlocked ? this.theme.textColor : '#666666';
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(mode.name, x + width / 2, y + 40);

        // 绘制星级难度
        this.drawStars(ctx, x + width / 2, y + 80, mode.stars, isUnlocked);

        // 如果模式未解锁，绘制解锁条件
        if (!isUnlocked) {
            ctx.fillStyle = '#666666';
            ctx.font = '16px Arial';
            let unlockText = '';
            switch (mode.type) {
                case 'timeAttack':
                    unlockText = '需要1000分解锁';
                    break;
                case 'maze':
                    unlockText = '需要完成3次经典模式';
                    break;
            }
            ctx.fillText(unlockText, x + width / 2, y + height - 30);
        }
    }

    private drawStars(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, count: number, isUnlocked: boolean): void {
        const starRadius = 15;
        const spacing = 40;
        const startX = centerX - ((count - 1) * spacing) / 2;

        for (let i = 0; i < count; i++) {
            const x = startX + i * spacing;
            ctx.fillStyle = isUnlocked ? '#FFD700' : '#666666';
            this.drawStar(ctx, x, centerY, starRadius);
        }
    }

    private drawStar(ctx: CanvasRenderingContext2D, cx: number, cy: number, radius: number): void {
        const spikes = 5;
        const outerRadius = radius;
        const innerRadius = radius / 2;

        ctx.beginPath();
        for (let i = 0; i < spikes * 2; i++) {
            const r = i % 2 === 0 ? outerRadius : innerRadius;
            const angle = (i * Math.PI) / spikes - Math.PI / 2;
            const x = cx + Math.cos(angle) * r;
            const y = cy + Math.sin(angle) * r;
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.fill();
    }

    private isModeUnlocked(mode: 'classic' | 'timeAttack' | 'maze'): boolean {
        return this.config.unlockedModes.includes(mode);
    }
}